<script lang='ts'>
import { defineComponent, ref } from "vue";
import { List, Search } from "@element-plus/icons";
import { FindTaskUtil } from "../../func/findTaskSearch";
import { mapView } from "../../func/index";
import { queryAttribute } from "../../../../model/mapModel/queryAttributeModel";
import store from "@/store/index";
export default defineComponent({
  name: "ToponymyLocation",
  components: { Search },
  setup() {
    const search = ref();
    const resultList = ref();
    const layerURL =
      "http://10.10.24.31:6080/arcgis/rest/services/X_FZYS/XH_POI_BZ_2020/MapServer";
    //根据搜索框输入内容，查询图层信息列表
    const projectQuery = async () => {
      const layerIds = [0];
      const _searchFields = ["名称"];
      const findres = new FindTaskUtil(
        mapView,
        layerURL,
        layerIds,
        _searchFields,
        search.value
      );
      resultList.value = await findres.SearchResult();
      console.log('地名地址查询结果：',resultList.value);
      
    };
    const activeNum = ref(-1);
    //点击搜索结果列表内的选项，定位到指定的点
    const attrClick = (item: any, index: number) => {
      activeNum.value = index;
      const layerIds = [0];
      const _searchFields = ["FID"];
      const findres = new FindTaskUtil(
        mapView,
        layerURL,
        layerIds,
        _searchFields,
        item.FID
      );
      const scarchResult = findres.SearchLocation("point");      
    };
    return {
      search,
      projectQuery,
      resultList,
      attrClick,
      activeNum,
    };
  },
});
</script>

<template>
  <div class="toponymylocation-page-wrap">
    <div style="margin-top: 15px">
      <el-input
        v-model="search"
        placeholder="请输入地点名称"
        class="input-with-select"
      >
        <template #append>
          <el-button @click="projectQuery"
            ><el-icon :size="20" color="#aaa"><Search /></el-icon
          ></el-button>
        </template>
      </el-input>
      <!-- 列表 -->
      <div>
        <ul>
          <li
            v-for="(i, index) in resultList"
            :key="i"
            @click="attrClick(i, index)"
            :class="activeNum == index ? 'red' : 'yellow'"
          >
            <div class="list-data">
              <div hidden>{{ i.FID }}</div>
              <div class="left">{{index+1}}</div>
              <div class="right">
                <span>{{ i.名称 }}</span>
                <span>{{ i.地址 }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 分页 -->
      <el-pagination
        small
        :page-size="10"
        :pager-count="10"
        layout="prev, pager, next"
        :total="500"
      >
      </el-pagination>
    </div>
  </div>
</template>

<style lang='less' scoped>
.red {
  border-bottom: 1px solid #1299f5;
  border-top: 1px solid #1299f5;
  border-left: 2px solid #1299f5;
  border-right: 2px solid #1299f5;
}
.toponymylocation-page-wrap {
  padding: 5px;

  .list-data {
    padding: 20px 0;
    display: flex;
    justify-content: start;
    align-items: center;
    border-bottom: 1px dotted #1299f5;
    .left {
      margin-right: 20px;
    }
    .right {
      display: flex;
      flex-direction: column;
    }
  }
}
</style>